<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<script type="text/javascript">
	function hostNameToTag(name) {
		ret = name.replace('\.', '_')
		if (ret.indexOf('.') != -1) {
			return hostNameToTag(ret);
		} else {
			return ret;
		}
	}

	function updateHosts() {
		$.getJSON('services/rest/system/hosts/all', function(data) {
			$('#hosts-list').empty();
			$.each(data.host, function(i, item) {
				$('#hosts-list').append(
						'<li class="ui-widget-content ui-corner-all rounded" id="host-'
								+ hostNameToTag(item.name) + '"><h3>'
								+ item.name
								+ '</h3><ul class="host-status"></ul></li>');
				updateHostStatus(item.name);
			})
		});
	}
	function updateHostStatus(name) {
		$('#host-' + hostNameToTag(name) + ' .host-status').empty();
		$.getJSON('services/rest/situation/hosts/' + name + '/status',
				function(data) {
					$('#host-' + hostNameToTag(name) + ' .host-status').append(
							'<li>' + data.status['@state'] + '</li>');
					$('#hosts-list').selectable(
							{
								stop : function() {
									count = 0;
									$('#hosts-list .ui-selected').each(
											function(i, item) {
												count ++;
											});
									if(count > 0) {
										$('#delete-host').button({
											text : false,
											icons : {
												primary : "ui-icon-minus"
											},
											disabled : false
										});
									}
								}
							});
				});
	}
	$(function() {

		$("#new-host-dialog").dialog({
			minWidth : 500,
			minHeight : 400
		});

		$('#refresh-host').button({
			text : false,
			icons : {
				primary : 'ui-icon-arrowrefresh-1-w'
			}
		});
		$('#refresh-host').click(updateHosts);

		$('#new-host').button({
			text : false,
			icons : {
				primary : "ui-icon-plus"
			}
		});
		$('#new-host').click(function() {
			$("#new-host-dialog").dialog('open');
		});

		$('#delete-host').button({
			text : false,
			icons : {
				primary : "ui-icon-minus"
			},
			disabled : true
		});

		$('#startup-host').button({
			text : false,
			icons : {
				primary : "ui-icon-play"
			},
			disabled : true
		});
		$('#startup-host').click(function() {
		});

		$('#new-host-powermanagement-type').buttonset();

		
		$('#delete-host').click(function() {
			$("#delete-host-dialog").dialog('open');
		});

		$('#shutdown-host').button({
			text : false,
			icons : {
				primary : "ui-icon-stop"
			},
			disabled : true
		});
		$('#shutdown-host').click(function() {
			$("#shutdown-host-dialog").dialog('open');
		});
		
		$("#save-host").button({
			icons : {
				primary : "ui-icon-disk"
			},
			text : false
		});
		$("#save-host").click(function() {
			newHost = {
				host : {
					name : $('#new-host-name').val(),
					address : $('#new-host-addr').val(),
					rootPassword : $('#new-host-passwd').val(),
					"@dedicated" : ($('#new-host-dedicated').val() == 'on' ? "true" : "false")
				}
			};
			$.ajax({
				type : 'POST',
				url : 'services/rest/system/hosts/save',
				contentType : 'application/json',
				dataType : 'json',
				data : JSON.stringify(newHost),
				success : function(data, status, xhr) {
					$("#new-host-dialog").dialog('close');
					updateHosts();
				}
			});
		});
		$('#delete-host').click(function() {
			$.post('services/rest/system/hostfacade/remove', {name: $('h3.ui-selectee').text()}, updateHosts);
		});
		
		updateHosts();

	})
</script>

<div id="hosts">
		<div id="new-host-dialog" class="dialog" title="New Host">
		<div class="tabs">
			<ul>
				<li><a href="#details">details</a>
				</li>
				<li><a href="#power-management">power management</a>
				</li>
			</ul>
			<div id="details">
				<div>
					<label for="new-host-name">name</label> <input id="new-host-name" />
				</div>
				<div>
					<label for="new-host-addr">addr</label> <input id="new-host-addr" />
				</div>
				<div>
					<label for="new-host-dedicated">dedicated</label> <input type="checkbox" id="new-host-dedicated" />
				</div>
				<div>
					<label for="new-host-passwd">root password</label> <input id="new-host-passwd" />
				</div>
			</div>
			<div id="power-management">
				<div id="new-host-powermanagement-type">
					<input type="radio" id="new-host-powermanagement-type-wal" name="radio" checked="checked"/><label for="new-host-powermanagement-type-wal">WAL</label>
					<input type="radio" id="new-host-powermanagement-type-ipmi" name="radio" /><label for="new-host-powermanagement-type-ipmi">IPMI</label>
					<input type="radio" id="new-host-powermanagement-type-manual" name="radio" /><label for="new-host-powermanagement-type-manual">Manual</label>
				</div>
				<div id="new-host-powermanagement-type-wal-details">
					<label for="new-host-powermanagement-wal-mac">MAC address</label><input id="new-host-powermanagement-wal-mac"/>
				</div>
				<div id="new-host-powermanagement-type-ipmi-details">
					<input id="new-host-powermanagement-ipmi-user"/>
					<input id="new-host-powermanagement-ipmi-passwd"/>
					<input id="new-host-powermanagement-ipmi-addr"/>
				</div>
			</div>
		</div>
		<button id="save-host"></button>
	</div>
	
	<span id="hosts-toolbar" class="toolbar ui-widget-header ui-corner-all">
		<button id="refresh-host" class="button"></button>
		<button id="new-host" class="button"></button>
		<button id="delete-host" class="button"></button>
		<button id="shutdown-host" class="button"></button>
		<button id="startup-host" class="button"></button>
	</span>
	<ul id="hosts-list" class="selectable"></ul>
</div>
